<script setup>
import { ref, watch } from 'vue'

const money = ref(14000)
const count = ref(0)

// watch监视, 接收三个参数
// 1. 参数1: 监视的数据源
// 2. 参数2: 回调函数
// 3. 参数3: 额外的配置

// 用法1：侦听一个数据(常用)
watch(money, (val, oldVal) => {
  console.log('钱变化了', { val, oldVal })
})

// 用法2：同时侦听多个数据
// watch([money, count], (val, oldVal) => {
//   console.log('val', val)
//   console.log('oldVal', oldVal)
// })

const user = ref({
  name: 'zs',
  age: 18,
})

// 用法3：侦听对象，开启深度侦听(常用)
watch(
  user,
  () => {
    console.log('user对象变化了')
  },
  {
    deep: true,
    immediate: true,
  },
)

// 用法4：侦听对象的某个属性
// watch(
//   () => {
//     return user.value.age
//   },
//   () => {
//     console.log('年龄变了')
//   },
// )
</script>

<template>
  <h1>watch 侦听器</h1>
  <h2>{{ money }}</h2>
  <h2>{{ count }}</h2>
  <button @click="money -= 520">点击花钱</button>
  <button @click="count++">点击+1</button>
  <hr />
  <hr />
  <hr />
  <h2>{{ user }}</h2>
  <button @click="user.age++">点击对象年龄+1</button>
  <button @click="user.name += '啊'">点击对象啊一下</button>
</template>
